<template>
	<view class="refund_box">
		<view class="refund_box_con">
			<view class="store_info">
				<view class="store_status">
					{{refund_info.after_sales_log[0].type_text}}
				</view>
				<view class="qishou_status">
					{{refund_info.after_sales_log[0].content}}
				</view>
			</view>
			<view class="">
				<view class="refund" style="margin-bottom: 20rpx;">
					<view class="refund_title">
						退款金额
					</view>
					<view class="refund_con">
						￥{{refund_info.refund_price}}
					</view>
				</view>
				<view class="refund" style="margin-bottom: 60rpx;">
					<view class="refund_title">
						退款账户
					</view>
					<view class="refund_con">
						原支付账户
					</view>
				</view>
			</view>
			<view style="width: 100%; display: flex;justify-content: flex-end;color: #4DABEB; font-size: 28rpx;align-items: center;" @click="TelephoneStore">
				<tui-icon name="voipphone" color="#2697f4" :size="18" class="order-icon"></tui-icon>联系商家
			</view>
			<view class="content">
				<!-- <mSidebar title="退款流程"> -->
				<view class="sidebar_title">
					退款流程
				</view>
					<view class="row">
						<m-steps v-for="(item, index) in refund_info.after_sales_log" :item='item' :key="index" :index='index' :activity= 'activity'>
							
						</m-steps>
					</view>
				<!-- </mSidebar> -->
			</view>
			<view class="refund_info">
				<view class="refund_info_title">
					退款信息
				</view>
				<view class="shop_box" v-for="(item,index) in cart_info">
					<view class="shop_box">
						<image :src="item.product_info.image_text" mode="" style="width: 90rpx;height: 90rpx;"></image>
						<view class="" style="margin-left: 20rpx;">
							<view class="">
								{{item.product_info.name}}
							</view>
							<view class="">
								x{{item.cart_num}}
							</view>
						</view>
					</view>
					<view class="">
						￥{{item.total_price}}
					</view>
				</view>
				<view class="refund" style="margin-bottom: 20rpx;font-size: 24rpx;">
					<view class="refund_title">
						退款原因
					</view>
					<view class="refund_con">
						{{refund_reason}}
					</view>
				</view>
				<view class="refund" style="margin-bottom: 40rpx;font-size: 24rpx;">
					<view class="refund_title">
						订单号码
					</view>
					<view class="refund_con">
						{{refund_info.order_sn}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiIcon from '../../components/thorui/tui-icon/tui-icon.vue';
	import mSidebar from "@/components/m-sidebar/m-sidebar.vue";
	import mSteps from '@/components/m-steps/m-steps.vue';
	import {afterSalesInfo} from "../../request/takeout.js"
	export default{
		components: {
		    mSidebar,
		    mSteps,
			tuiIcon
		},
		data(){
			return{
				activity: 0,
				refund_info:"",
				cart_info:"",
				refund_reason:"",
				wrapRecordList: [
					
				],
				progressStatus: ["退款申请已提交","等待商家处理","商家拒绝退款"]
			}
		},
		//返回  首页
		onBackPress(e){
		  console.log("监听返回按钮事件",e);
		//返回主页面tabBar
		uni.switchTab({
			url:"/pages/TabBar/Takeout/Takeout"
		})
		  // 此处一定要return为true，否则页面不会返回到指定路径
		  return true;
		},
		onLoad(point) {
			afterSalesInfo({
				id:point.order_id,
			}).then(res=>{
				this.refund_info=res.data.detail
				if(this.refund_info.after_sales_log[this.refund_info.after_sales_log.length-1].content!==""){
					this.refund_reason=this.refund_info.after_sales_log[this.refund_info.after_sales_log.length-1].content.split("：")[1]
				}
				this.cart_info=res.data.cart_info
			})
		},
		methods:{
			//电话商家
			TelephoneStore(){
				this.phoneNumber=this.refund_info.order.store.mobile
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: this.phoneNumber,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.refund_box{
		width: 92%;
		padding:30rpx 30rpx 150rpx 30rpx;
		height: 100%;
		background-color: #eee;
		.refund_box_con{
			width: 95%;
			border-top: 30rpx solid #4DABEB;
			border-radius: 30rpx 30rpx 0px 0px;
			background-color: #FFFFFF;
			padding: 20rpx;
			.store_info{
				margin: 20rpx 0 60rpx 0;
				.store_status{
					font-size: 36rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
				}
				.qishou_status{
					font-size: 28rpx;
					color: #3E3E3E;
				}
			}
			.refund{
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #aaaaaa;
				.refund_con{
					color: #555555;
				}
			}
			.content {
				.sidebar_title{
					font-weight: bolder;
					font-size: 34rpx;
				}
				.row {
					padding: 24rpx 0;
					/deep/ .tail{
						left:10rpx
					}
					/deep/ .wrapper{
						padding-left: 60rpx;
					}
					/deep/ .node{
						left:0
					}
				}
			}
			.refund_info{
				.refund_info_title{
					font-weight: bolder;
					margin-bottom: 40rpx;
					font-size: 34rpx;
				}
				.shop_box{
					display: flex;
					font-size: 28rpx;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>
